import {PlusOutlined} from '@ant-design/icons';
import {
    ModalForm,
    ProForm,
    ProCard,
    ProFormDateRangePicker,
    ProFormSelect,
    ProFormText,
} from '@ant-design/pro-components';
import {Button, Form, message, Popconfirm} from 'antd';
import {ProFormDatePicker, ProFormTextArea} from "@ant-design/pro-form/lib";
import SingleUpload from "@/components/FileUpload";
import MultiUpload from "@/components/FileUpload/multi";
import {useEffect, useState} from "react";
import {updateModelStatus, updateModelInfo, modelList} from "@/services/chatter";
import { useRef } from 'react';


export default (props) => {
    if (!props) {
        return;
    }
    const {reloadTable, record} = props;
    const formRef = useRef();
    const [data, setData] = useState([]);
    const [form] = Form.useForm<{ name: string; company: string }>();
    const {visible} = false;
    useEffect(() => {
        modelList({modelCode: record.modelCode,showAllImages:1}).then(res => {
            setData(res.list[0])
        });
    }, [record.modelCode])

    return (
        <ModalForm<{
            name: string;
            company: string;
        }>
            title="Detail"
            formRef={formRef}
            trigger={
                <a type="primary" key={record.modelCode} onClick={() => {
                        // modelDetail({modelCode: record.modelCode}).then(res => {
                        //     setData(res)
                        //     formRef.reload()
                        // });

                    // modelList({modelCode: record.modelCode,showAllImages:1}).then(res => {
                    //             setData(res.list[0])
                    //             // formRef.current.reload()
                    //     });
                    //
                    }
                }>
                    {record.modelCode}
                </a>
            }
            form={form}
            autoFocusFirstInput
            visible={visible}
            footer={[]}
            cancelButtonProps={{ style: { display: 'none' } }}
            modalProps={{
                destroyOnClose: true,
                onCancel: () => console.log('run'),
            }}


        >

            <ProCard
                title="Basic Info"
                bordered
            >
                <ProForm.Group>

                    <ProFormText
                        name="nickName"
                        label={"Name"}
                        readonly={true}
                        rules={[{required: true}]}
                        initialValue={record.name}
                    />


                    <ProFormSelect
                        request={async () => [
                            {
                                value: 1,
                                label: 'male',
                            },
                            {
                                value: 2,
                                label: 'female',
                            }, {
                                value: 3,
                                label: 'others',
                            },
                        ]}
                        readonly={true}
                        name="gender"
                        label="Gender"
                        rules={[{required: true}]}
                        initialValue={data.gender}
                    />

                    <ProFormSelect
                        request={async () => [
                            {
                                value: 2,
                                label: 'CM',
                            },
                            {
                                value: 3,
                                label: 'M',
                            },

                        ]}
                        readonly={true}
                        width="md"
                        name="modelType"
                        label="ModelType"
                        rules={[{required: true}]}
                        initialValue={data.modelType}
                    />

                    <ProFormDatePicker name="birthday" label="DOB" rules={[{required: true}]}
                                       initialValue={data.birthDay } readonly={true}
                    />
                    <ProFormSelect
                        request={async () => [
                            {
                                value: 1,
                                label: 'male',
                            },
                            {
                                value: 2,
                                label: 'female',
                            },
                            {
                                value: 3,
                                label: 'others',
                            },
                        ]}
                        readonly={true}
                        width="md"
                        name="lookingFor"
                        label="Looking For"
                        rules={[{required: true}]}
                        initialValue={data.lookingFor}
                    />

                    <ProFormSelect
                        request={async () => [
                            {
                                value: 1,
                                label: 'Making new friends',
                            },
                            {
                                value: 2,
                                label: 'Seeking a long-term partner',
                            },
                            {
                                value: 3,
                                label: 'Looking for a dating partner',
                            },
                        ]}
                        width="md"
                        name="whyYouHere"
                        label="Why you here"
                        readonly={true}
                        rules={[{required: true}]}
                        initialValue={data.target}
                    />
                    <ProFormSelect
                        fieldProps={{
                            mode: 'multiple',
                        }}
                        request={async () => [
                            {
                                value: '1',
                                label: 'Art',
                            },
                            {
                                value: '2',
                                label: 'Adventure',
                            },
                            {
                                value: '3',
                                label: 'Photography',
                            },
                            {
                                value: '4',
                                label: 'Pets',
                            },
                            {
                                value: '5',
                                label: 'Parties',
                            },
                            {
                                value: '6',
                                label: 'Theater',
                            },
                            {
                                value: '7',
                                label: 'Reading',
                            },
                            {
                                value: '8',
                                label: 'Exercise',
                            },
                            {
                                value: '9',
                                label: 'Music',
                            },
                            {
                                value: '10',
                                label: 'Games',
                            },
                            {
                                value: '11',
                                label: 'Outdoor',
                            },
                            {
                                value: '12',
                                label: 'Movies',
                            },
                            {
                                value: '13',
                                label: 'Traveling',
                            },
                            {
                                value: '14',
                                label: 'Fitness',
                            },
                        ]}
                        width="md"
                        readonly={true}
                        name="interests"
                        label="Interests"
                        rules={[{required: true}]}
                        initialValue={data.interests}
                    />
                    <ProFormTextArea
                        width="md"
                        name="aboutMe"
                        label="About me"
                        readonly={true}
                        rules={[{required: true}]}
                        initialValue={data.aboutMe}
                    />

                    <ProFormSelect
                        fieldProps={{
                            mode: 'multiple',
                        }}
                        request={async () => [
                            {
                                value: '1',
                                label: 'Kisses',
                            },
                            {
                                value: '2',
                                label: 'Bondage',
                            },
                            {
                                value: '3',
                                label: 'Blingfolding',
                            },
                            {
                                value: '4',
                                label: 'Breakfast',
                            },
                            {
                                value: '5',
                                label: 'Sexting',
                            },
                            {
                                value: '6',
                                label: 'Outdoors',
                            },
                            {
                                value: '7',
                                label: 'Biting',
                            },
                            {
                                value: '8',
                                label: 'Toys',
                            },
                            {
                                value: '9',
                                label: 'Busbes',
                            },
                            {
                                value: '10',
                                label: 'Home Video',
                            },
                            {
                                value: '11',
                                label: 'Group Fun',
                            },
                            {
                                value: '12',
                                label: 'Being watched',
                            },
                            {
                                value: '13',
                                label: 'Wax Play',
                            },
                            {
                                value: '14',
                                label: 'Cuckold',
                            },
                            {
                                value: '15',
                                label: 'Feet',
                            },
                            {
                                value: '16',
                                label: 'Dirty Talk',
                            },
                            {
                                value: '17',
                                label: 'I\'m a dom',
                            },
                            {
                                value: '18',
                                label: 'I\'m a sub',
                            },
                            {
                                value: '19',
                                label: 'Switch',
                            },
                            {
                                value: '20',
                                label: 'Scent',
                            },
                            {
                                value: '21',
                                label: 'Massage',
                            },
                            {
                                value: '22',
                                label: 'Striptease',
                            },
                            {
                                value: '23',
                                label: 'Dress up',
                            },
                            {
                                value: '24',
                                label: 'BDSM',
                            },

                        ]}
                        width="md"
                        name="turnOns"
                        readonly={true}
                        label="TurnOns"
                        rules={[{required: false}]}
                        initialValue={data.turnOns}
                    />
                </ProForm.Group>
            </ProCard>
            <ProCard
                title="Photos Info"
                bordered
            >
                <ProForm.Group>
                    Avatar: <SingleUpload initValue={data.avatarUrl} setUrl={(avatarUrl) => {
                    setAvatar(avatarUrl);
                }}/>
                </ProForm.Group>
                <ProForm.Group>
                    Photos: <MultiUpload initValue={data.images} setUrl={(Url) => {
                    setPhotos(Url);
                }}/>
                </ProForm.Group>
            </ProCard>

            <ProCard
                title="Albums Info"
                bordered
            >
                <ProForm.Group>
                    Public Albums: <MultiUpload initValue={data.publicImages} setUrl={(urls) => {
                    setPublicAlbum(urls);
                    // setAvatar(avatarUrl);
                }}/>
                </ProForm.Group>
                <ProForm.Group>
                    Private Albums: <MultiUpload initValue={data.privateImages} setUrl={(urls) => {
                    setPrivateAlbum(urls);
                }}/>
                </ProForm.Group>
            </ProCard>

        </ModalForm>
    );
};